import React, { Component } from 'react'
import { withRouter } from 'react-router-dom/cjs/react-router-dom.min'
import style from './Tabbar.module.css'

import { TabBar } from 'antd-mobile'
import {
    MovieOutline,
    HistogramOutline,
    UserOutline,
} from 'antd-mobile-icons'

class CustomTabbar extends Component {
    tabs = [
        {
            key: '/films',
            title: '电影',
            icon: <MovieOutline />,
        },
        {
            key: '/cinemas',
            title: '影院',
            icon: <HistogramOutline />,
        },
        {
            key: '/center',
            title: '我的',
            icon: <UserOutline />,
        }
    ]
    render() {
        return (
            <div className={style.tabbar}>
                <TabBar onChange={(key) => {
                    this.props.history.push(key)
                }} activeKey={'/' + this.props.location.pathname.split('/')[1]}>
                    {this.tabs.map(item => (
                        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                    ))}
                </TabBar>
            </div>
        )
    }
}

export default withRouter(CustomTabbar)
